{extend name="app/admin/view/base.html"/}
{block name="resources"}
<style>
    #container{ width: 650px; height: 500px; }
    .empty-address{ display: none; }
    .address-content {display: inline-block;vertical-align: top;}
    .ns-form {margin-top: 0;}
    .upload_img_square {
        display: inline-block;
        width: 80px;
        height: 80px;
        line-height: 78px;
        font-size: 30px;
        color: #bbbbbb;
        cursor: pointer;
        border: 1px dashed #ccc;
        border-radius: 5px;
        text-align: center;
        margin-bottom: 10px;
        margin-right: 10px;
    }

    .upload_img_square_item {
        display: inline-block;
        float: left;
        width: 80px;
        height: 80px;
        position: relative;
        border: 1px dashed #e5e5e5;
        text-align: center;
        transition: background-color 0.3s ease;
        margin-bottom: 10px;
        margin-right: 10px;
    }
    .upload_img_square_item:hover {
        border: 1px dashed #ff8143;
        border-radius: 5px;
    }
    .upload_img_square_item:hover .operation {
        display: block;
    }
    .upload_img_square_item .img-wrap {
        width: 80px;
        font-size: 0;
        line-height: 79px;
        border-radius: 5px;
        overflow: hidden;
    }
    .upload_img_square_item .img-wrap img {
        width: calc(100% - 2px);
        height: calc(100% - 2px);
    }
    .upload_img_square_item .operation {
        position: absolute;
        top: 0;
        z-index: 10;
        width: 80px;
        height: 80px;
        line-height: 80px;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        cursor: pointer;
        text-align: center;
        display: none;
    }
    .upload_img_square_item .operation i {
        font-size: 20px;
        margin-left: 10px;
    }
    .upload_img_square_item .operation i:first-child {
        margin-left: 0;
    }
    .upload_img_square_item .operation .replace_img {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 24px;
        color: #fff;
        background: rgba(0, 0, 0, 0.5);
        font-size: 12px;
        line-height: 24px;
    }

    /* 展示视频 */
    .video-thumb {
        display: block;
        float: left;
        width: 250px;
        height: 120px;
        position: relative;
    }

    .video-thumb span {
        width: 10px;
        height: 10px;
        cursor: pointer;
        position: absolute;
        right: 10px;
        top: 10px;
        background-image: url('../img/video_thumb_close.png');
        background-size: 100%;
        z-index: 100;
    }

    .video-thumb span.hide {
        display: none;
    }

    .video-thumb > #goods_video, .video-thumb > #temp_goods_video {
        width: 100% !important;
        height: 121px;
        background: #ffffff;
    }

    .video-thumb > #temp_goods_video {
        display: none;
    }

</style>
<link rel="stylesheet" href="__STATIC__/ext/video/video.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/ext/searchable_select/searchable_select.css" />
{/block}
{block name="main"}

<div class="layui-form ns-form" lay-filter="editselffetch">
    <div class="layui-card ns-card-common ns-card-brief">
        <div class="layui-card-header">
            <span class="ns-card-title">酒店信息</span>
        </div>
        <div class="layui-card-body">
            <div class="layui-form-item">
                <label class="layui-form-label">酒店类型：</label>
                <div class="layui-input-block">
                    <input type="radio" name="hotel_type" value="1" title="个人" checked>
                    <input type="radio" name="hotel_type" value="2" title="企业">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>酒店名称：</label>
                <div class="layui-input-block">
                    <input name="hotel_name" type="text" lay-verify="required" placeholder="请输入酒店名称" autocomplete="off" class="layui-input ns-len-long">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>联系电话：</label>
                <div class="layui-input-block">
                    <input type="text" name="telphone" autocomplete="off" class="layui-input  ns-len-long" lay-verify="tel|required">
                </div>
                <div class="ns-word-aux">请输入合法的手机号</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>联系邮箱：</label>
                <div class="layui-input-block">
                    <input type="text" name="contact_email" lay-verify="required" autocomplete="off" class="layui-input ns-len-long" >
                </div>
                <div class="ns-word-aux">请输入联系人电子邮箱</div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>酒店等级：</label>
                <div class="layui-input-inline ns-len-mid area-select">
                    <select name="hotel_level" lay-filter="hotel_level" lay-verify="hotel_level">
                        <option value="1">一星级</option>
                        <option value="2">二星级</option>
                        <option value="3">三星级</option>
                        <option value="4">四星级</option>
                        <option value="5">五星级</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>交通：</label>
                <div class="layui-input-block">
                    <textarea name="traffic" class="layui-textarea ns-len-long"></textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">营业状态：</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="status" value="1" lay-skin="switch">
                </div>
                <div class="ns-word-aux">是否开启营业，关闭即停业</div>
            </div>

            <div class="layui-form-item time-type-view-all" >
                <label class="layui-form-label"><span class="required">*</span>营业时间：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="startTime" lay-verify="start_time" placeholder="开始时间" value="" readonly >
                    <input type="hidden" class="layui-input" name="start_time" placeholder="开始时间" >
                </div>
                <div class="layui-form-mid layui-word-aux">~</div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="endTime" lay-verify="end_time" placeholder="结束时间" value="" readonly >
                    <input type="hidden" class="layui-input" name="end_time" placeholder="结束时间" >
                </div>
            </div>

            <div class="layui-form-item goods-image-wrap">
                <label class="layui-form-label">营业执照：</label>
                <div class="layui-input-block">
                    <!--商品主图项-->
                    <div class="js-quality-image"></div>
                    <div class="item js-add-quality-image upload_img_square">+</div>
                </div>
                <input type="hidden" name="business_license" />
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">营业执照编号：</label>
                <div class="layui-input-block">
                    <input type="number" name="business_license_number" autocomplete="off" class="layui-input  ns-len-long" >
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">有效期类型：</label>
               <!-- <div class="layui-input-block">
                    <input type="number" name="business_license_type" autocomplete="off" class="layui-input  ns-len-long" >
                </div>-->
                <div class="layui-input-block" id="business_license_type">
                    <input type="radio" name="business_license_type" lay-filter="businessLicenseType" value="1" title="长期有效" >
                    <input type="radio" name="business_license_type" lay-filter="businessLicenseType" value="0" title="有期限" checked>
                </div>
            </div>

            <div class="layui-form-item" id="business_license_time">
                <label class="layui-form-label">证件有效期：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="businessLicenseStartTime" lay-verify="business_license_start_time" placeholder="营业执照开始时间" value="" readonly >
                    <input type="hidden" class="layui-input" name="business_license_start_time" placeholder="营业执照开始时间" >
                </div>
                <div class="layui-form-mid layui-word-aux">~</div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="businessLicenseEndTime" lay-verify="business_license_end_time" placeholder="营业执照结束时间" value="" readonly >
                    <input type="hidden" class="layui-input" name="business_license_end_time" placeholder="营业执照结束时间" >
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>是否自营：</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="direct" value="1" lay-skin="switch">
                </div>

            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">平台抽成比例：</label>
                <div class="layui-input-block">
                    <input type="number" name="commission_rate" autocomplete="off" class="layui-input  ns-len-long" >
                </div>
                <div class="ns-word-aux">平台抽取酒店订单费用的比例</div>
            </div>

            <!--自提点地址-->
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>酒店地址：</label>
                <div class="layui-input-inline ns-len-mid area-select">
                    <select name="province_id" lay-filter="province_id" lay-verify="province_id">
                        <option value="">请选择省份</option>
                        {foreach $province_list as $k => $v}
                        <option value="{$v.id}">{$v.name}</option>
                        {/foreach}
                    </select>
                </div>

                <div class="layui-input-inline ns-len-mid area-select">
                    <select name="city_id"  lay-filter="city_id" lay-verify="city_id">
                        <option value="">请选择城市</option>
                    </select>
                </div>

                <div class="layui-input-inline ns-len-mid area-select">
                    <select name="district_id"  lay-filter="district_id" lay-verify="district_id">
                        <option value="">请选择区/县</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <input type="text" name="address"  placeholder="请填写酒店的具体地址。" lay-verify="required" autocomplete="off" class="layui-input ns-len-long address-content" value="">
                    <input type = "hidden" name="longitude" lay-verify="required" class="layui-input"/>
                    <input type = "hidden" name="latitude" lay-verify="required" class="layui-input"/>
                    <button class='layui-btn-primary layui-btn' onclick="refreshFrom();">查找地址</button>
                </div>
                <div class="ns-word-aux">点击查找地址可在地图上显示输入的地理位置</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">地图定位：</label>
                <div class="layui-input-block ns-special-length">
                    <div id="container" class="selffetch-map"></div>
                </div>
                <div class="ns-word-aux empty-address">请选择地理位置！在地图上点击得到的地理位置会自动填入到对应的输入框中</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>酒店账号：</label>
                <div class="layui-input-block">
                    <input type="text" name="username" lay-verify="required" placeholder="请输入酒店账号" autocomplete="off" class="layui-input ns-len-mid">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>酒店密码：</label>
                <div class="layui-input-block">
                    <input type="password" name="password" lay-verify="required" placeholder="请输入酒店密码" autocomplete="off" class="layui-input ns-len-mid">
                </div>
            </div>
        </div>

        <div class="layui-card-header">
            <span class="ns-card-title">设备</span>
        </div>

        <div class="layui-card-body">

            <div class="layui-form-item js-new-attr-list">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <div class="layui-form">
                        <table class="layui-table">
                            <colgroup>
                                <col width="20%" />
                                <col width="50%" />
                                <col width="20%" />
                                <col width="10%" />
                            </colgroup>
                            <thead>
                            <tr>
                                <th>设备名称</th>
                                <th>设备描述</th>
                                <th class="ns-prompt-block">
                                    排序
                                    <div class="ns-prompt">
                                        <i class="iconfont iconwenhao1"></i>
                                        <div class="ns-prompt-box">
                                            <div class="ns-prompt-con">设置排序，改变设备展示顺序</div>
                                        </div>
                                    </div>
                                </th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody class="ns-attr-new">
                            <tr class="ns-null-data">
                                <td colspan="4" align="center">无数据</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <button class="layui-btn layui-btn-primary" onclick="addNewAttr()">添加参数</button>
                </div>
            </div>
        </div>

        <div class="layui-card-header">
            <span class="ns-card-title">联系人信息</span>
        </div>

        <div class="layui-card-body">
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>身份证正面图片：</label>
                <div class="layui-input-block img-upload">
                    <div class="upload-img-block">
                        <div class="upload-img-box ">
                            <div class="ns-upload-default" id="frontPicUpload">
                                <div class="upload">
                                    <img src="ADMIN_IMG/upload_img.png" data-id="imgUpload"/>
                                    <p>点击上传</p>
                                </div>
                            </div>
                            <div class="operation">
                                <div>
                                    <i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
                                    <i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
                                </div>
                                <div class="replace_img js-replace">点击替换</div>
                            </div>
                            <input type="hidden" name="front_pic_id_card" >
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>身份证反面图片：</label>
                <div class="layui-input-block img-upload">
                    <div class="upload-img-block">
                        <div class="upload-img-box ">
                            <div class="ns-upload-default" id="reversePicUpload">
                                <div class="upload">
                                    <img src="ADMIN_IMG/upload_img.png" data-id="imgUpload"/>
                                    <p>点击上传</p>
                                </div>
                            </div>
                            <div class="operation">
                                <div>
                                    <i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
                                    <i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
                                </div>
                                <div class="replace_img js-replace">点击替换</div>
                            </div>
                            <input type="hidden" name="reverse_pic_id_card" >
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>证件姓名：</label>
                <div class="layui-input-block">
                    <input type="text" name="id_card_name" autocomplete="off" class="layui-input  ns-len-long">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>证件号码：</label>
                <div class="layui-input-block">
                    <input type="text" name="id_card_number" autocomplete="off" class="layui-input  ns-len-long">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>证件地址：</label>
                <div class="layui-input-block">
                    <input type="text" name="legal_addr"  lay-verify="required" autocomplete="off" class="layui-input  ns-len-long">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>证件类型：</label>
                <div class="layui-input-block ns-len-mid">
                    <select name="id_card_type">
                        <option value="">请选择证件类型</option>
                        {foreach $id_card_type_list as $id_card_type_list_k => $id_card_type_list_v}
                        <option value="{$id_card_type_list_v}">{$id_card_type_list_v}</option>
                        {/foreach}
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">有效期类型：</label>
                <div class="layui-input-block" id="legal_cert_validity_type">
                    <input type="radio" name="legal_cert_validity_type" lay-filter="legalCertValidityType" value="1" title="长期有效" >
                    <input type="radio" name="legal_cert_validity_type" lay-filter="legalCertValidityType" value="0" title="非长期有效" checked>
                </div>
            </div>

            <div class="layui-form-item time-type-view-all" >
                <label class="layui-form-label"><span class="required">*</span>证件有效期：</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="idCardStartTime" lay-verify="id_card_start_time" placeholder="证件有效期开始时间" value="" readonly >
                    <input type="hidden" class="layui-input" name="id_card_start_time" placeholder="证件有效期开始时间" >
                </div>
                <div class="layui-form-mid layui-word-aux">~</div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="idCardEndTime" lay-verify="id_card_end_time" placeholder="证件有效期结束时间" value="" readonly >
                    <input type="hidden" class="layui-input" name="id_card_end_time" placeholder="证件有效期结束时间" >
                </div>
            </div>
        </div>

        <div class="layui-card-header">
            <span class="ns-card-title">开户行信息</span>
        </div>

        <div class="layui-card-body">

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>开户人：</label>
                <div class="layui-input-block">
                    <input type="text" name="account_holder" autocomplete="off" class="layui-input  ns-len-long">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>开户行：</label>
                <div class="layui-input-inline">
                    <input name="bank_name" id="bank_name" type="text" lay-verify="required"  value="" class="layui-input ns-len-long" autocomplete="off" lay-verify="required">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>银行卡号：</label>
                <div class="layui-input-block">
                    <input type="text" name="bank_number" autocomplete="off" class="layui-input  ns-len-long">
                </div>
            </div>

            <div class="layui-form-item" data-flag="area">
                <label class="layui-form-label"><span class="required">*</span>开户银行所在地：</label>

                <div class="layui-input-inline ns-len-mid">
                    <select class="bank-province" name="bank_province" data-type="province" data-init="" lay-filter="bankProvince"></select>
                </div>
                <div class="layui-input-inline ns-len-mid">
                    <select class="bank-city" name="bank_city" data-type="city" data-init="" lay-filter="bankCity"></select>
                </div>
                <div class="layui-input-inline ns-len-mid">
                    <select class="bank-district" name="bank_district" data-type="district" data-init="" lay-filter="bankDistrict"></select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>银行卡类型：</label>
                <div class="layui-input-block ns-len-mid">
                    <select name="bank_type">
                        <option value="">请选择银行卡类型</option>
                        <option value="1">对公</option>
                        <option value="2">对私</option>
                        <option value="3">对私非法人</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>银行卡图片：</label>
                <div class="layui-input-block img-upload">
                    <div class="upload-img-block">
                        <div class="upload-img-box ">
                            <div class="ns-upload-default" id="bankUpload">
                                <div class="upload">
                                    <img src="ADMIN_IMG/upload_img.png" data-id="imgUpload"/>
                                    <p>点击上传</p>
                                </div>
                            </div>
                            <div class="operation">
                                <div>
                                    <i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
                                    <i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
                                </div>
                                <div class="replace_img js-replace">点击替换</div>
                            </div>
                            <input type="hidden" name="bank_img" >
                        </div>
                    </div>
                </div>
            </div>

        </div>


        <div class="layui-card-header">
            <span class="ns-card-title">图文信息</span>
        </div>

        <div class="layui-card-body">
            <div class="layui-form-item js-new-attr-list">
                <label class="layui-form-label">标签</label>
                <div class="layui-input-block">
                    <div class="layui-form">
                        <table class="layui-table">
                            <colgroup>
                                <col width="30%" />
                                <col width="20%" />
                                <col width="10%" />
                            </colgroup>
                            <thead>
                            <tr>
                                <th>标签名称</th>
                                <th class="ns-prompt-block">
                                    排序
                                    <div class="ns-prompt">
                                        <i class="iconfont iconwenhao1"></i>
                                        <div class="ns-prompt-box">
                                            <div class="ns-prompt-con">设置排序，改变标签展示顺序</div>
                                        </div>
                                    </div>
                                </th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody class="ns-attr-new-label">
                            <tr class="ns-null-data">
                                <td colspan="4" align="center">无数据</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <button class="layui-btn layui-btn-primary" onclick="addNewLabel()">添加标签</button>
                </div>
            </div>
            <!--<div class="layui-form-item">
                <label class="layui-form-label">标签：</label>
                <div class="layui-input-block">
                    {foreach $label_list as $label_list_k => $label_list_v}
                    <input type="checkbox" name="label_id[]" value="{$label_list_v.label_id}" title="{$label_list_v.label_name}" lay-skin="primary">
                    {/foreach}
                </div>
            </div>-->

            <div class="layui-form-item goods-image-wrap">
                <label class="layui-form-label">详情图片：</label>
                <div class="layui-input-block">
                    <!--商品主图项-->
                    <div class="js-goods-image"></div>
                    <div class="item js-add-goods-image upload_img_square">+</div>
                </div>
                <!--                <div class="item js-add-goods-image upload_img_square">+</div>-->

                <input type="hidden" name="images" value="" />
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">视频：</label>
                <div class="layui-input-block">
                    <div class="video-thumb">
                        <video id="goods_video" class="video-js vjs-big-play-centered" controls="" poster="SHOP_IMG/goods_video_preview.png" preload="auto"></video>
                        <video id="temp_goods_video" class="video-js vjs-big-play-centered" controls="" poster="SHOP_IMG/goods_video_preview.png" preload="auto"></video>
                        <span class="delete-video hide" onclick="deleteVideo()"></span>
                    </div>
                    <div id="videoUpload" title="商品视频" style="position: absolute;left: 0;width: 250px;height: 90px;opacity: 0;cursor: pointer;z-index:10;"></div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <input type="text" name="video_url" placeholder="在此输入外链视频地址" autocomplete="off" class="layui-input ns-len-long">
                </div>
                <div class="file-title ns-word-aux">
                    <div>注意事项：</div>
                    <ul>
                        <li>1、检查upload文件夹是否有读写权限。</li>
                        <li>2、PHP默认上传限制为2MB，需要在php.ini配置文件中修改“post_max_size”和“upload_max_filesize”的大小。</li>
                        <li>3、视频支持手动输入外链视频地址或者上传本地视频文件</li>
                        <li>4、必须上传.mp4视频格式</li>
                        <li>5、视频文件大小不能超过500MB</li>
                    </ul>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">详情：</label>
                <div class="layui-input-block">
                    <script id="editor" type="text/plain" style="width:70%;height:500px;"></script>
                </div>
                <script type="text/javascript" charset="utf-8" src="__STATIC__/ext/ueditor/ueditor.config.js"></script>
                <script type="text/javascript" charset="utf-8" src="__STATIC__/ext/ueditor/ueditor.all.js"> </script>
                <script type="text/javascript" charset="utf-8" src="__STATIC__/ext/ueditor/lang/zh-cn/zh-cn.js"></script>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">排序：</label>
                <div class="layui-input-block">
                    <input type="number" name="sort" autocomplete="off" class="layui-input  ns-len-long">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">推荐首页：</label>
                <div class="layui-input-block">
                    <input type="radio" name="is_recommend" value="1" title="是" lay-filter="is_recommend" checked>
                    <input type="radio" name="is_recommend" value="0" title="否" lay-filter="is_recommend" >
                </div>
            </div>

            <div class="layui-form-item recommend_reason">
                <label class="layui-form-label"><span class="required">*</span>推荐理由：</label>
                <div class="layui-input-block">
                    <input type="text" name="recommend_reason" autocomplete="off" class="layui-input  ns-len-long">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>首页图片：</label>
                <div class="layui-input-block img-upload">
                    <div class="upload-img-block">
                        <div class="upload-img-box ">
                            <div class="ns-upload-default" id="storeUpload">
                                <div class="upload">
                                    <img src="ADMIN_IMG/upload_img.png" data-id="imgUpload"/>
                                    <p>点击上传</p>
                                </div>
                            </div>
                            <div class="operation">
                                <div>
                                    <i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
                                    <i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
                                </div>
                                <div class="replace_img js-replace">点击替换</div>
                            </div>
                            <input type="hidden" name="hotel_img" >
                        </div>
                    </div>
                </div>

                <div class="ns-word-aux">建议宽度<span class="pic_width">710</span>px  建议高度<span class="pic_height">355</span>px</div>
            </div>
        </div>


    </div>



    <div class="ns-form-row">
        <button class="layui-btn ns-bg-color" lay-submit lay-filter="save">保存</button>
        <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
    </div>
</div>
<!--详情图片-->
<script type="text/html" id="houseNumberImage">
    {{# if(d.list.length){ }}
    {{# for(var i=0;i<d.list.length;i++){ }}
    <div class="item upload_img_square_item" data-index="{{i}}">
        <div class="img-wrap">
            <img src="{{ns.img(d.list[i])}}" layer-src>
        </div>
        <div class="operation">
            <i title="图片预览" class="iconfont iconreview js-preview"></i>
            <i title="删除图片" class="layui-icon layui-icon-delete js-delete" data-index="{{i}}"></i>
            <!--            <div class="replace_img img_show" data-index="{{i}}">点击替换</div>-->
        </div>
    </div>
    {{# } }}

    {{# } }}

</script>

<script type="text/html" id="qualityImage">
    {{# if(d.list.length){ }}
    {{# for(var i=0;i<d.list.length;i++){ }}
    <div class="item upload_img_square_item" data-index="{{i}}">
        <div class="img-wrap">
            <img src="{{ns.img(d.list[i])}}" layer-src>
        </div>
        <div class="operation">
            <i title="图片预览" class="iconfont iconreview js-preview"></i>
            <i title="删除图片" class="layui-icon layui-icon-delete js-delete" data-index="{{i}}"></i>
            <!--            <div class="replace_quality_img img_show" data-index="{{i}}">点击替换</div>-->
        </div>
    </div>
    {{# } }}
    {{# if(d.list.length < d.max){ }}
    <!--    <div class="item js-add-quality-image upload_img_square">+</div>-->
    {{# } }}
    {{# }else{ }}
    <!--    <div class="item js-add-quality-image upload_img_square">+</div>-->
    {{# } }}
</script>
{/block}
{block name="script"}
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'32f0302062f41190e845f1ab073cda3b',
    }
</script>
<script type="text/javascript" src="{:get_http_type()}://webapi.amap.com/maps?v=1.4.6&amp;key={if empty($map_key['gaode_map_key'])}af48136f5a3f33efe58cb118e0ea139c{else/}{$map_key['gaode_map_key']}{/if}"></script>
<!--<script type="text/javascript" src="{:get_http_type()}://webapi.amap.com/maps?v=1.4.6&amp;key={if empty($map_key['gaode_map_key'])}2df5711d4e2fd9ecd1622b5a53fc6b1d{else/}{$map_key['gaode_map_key']}{/if}"></script>-->
<script type="text/javascript" src="SHOP_JS/address.js"></script>
<script type="text/javascript" src="STATIC_JS/map_address.js"></script>
<script src="ADMIN_JS/address.js"></script>
<script src="__STATIC__/ext/drag-arrange.js"></script>
<script src="__STATIC__/ext/video/videojs-ie8.min.js"></script>
<script src="__STATIC__/ext/video/video.min.js"></script>
<script src="__STATIC__/ext/searchable_select/searchable_select.js"></script>

<script>

    var ue = UE.getEditor('editor');

    var goodsEquipmentFormat = [];//设备
    var goodsLabelFormat = [];//标签
    var houseNumberImage = [];//详情图片
    var qualityImage = [];
    const GOODS_IMAGE_MAX = 8;//商品主图数量
    var form, repeat_flag, map_class;

    layui.use(['form','laydate','upload','laytpl'], function() {
        var upload = layui.upload;
        var laydate = layui.laydate;
        laytpl = layui.laytpl;
        form = layui.form;
        repeat_flag = false;//防重复标识

        form.render();

        initArea(form); //三级联动初始化

        //是否免邮
        form.on("radio(is_recommend)", function (data) {
            if (data.value == 1) {
                $(".recommend_reason").show();
            } else {
                $(".recommend_reason").hide();
            }
        });

        //地图展示
        map_class = new mapClass("container",{lat:'',lng:''});
        form.render();

        upload.render({
            elem: '.js-add-goods-image' //绑定元素
            ,url:ns.url('admin/upload/upload')
            ,accept: 'images' //上传图片
            ,multiple: true //允许多文件上传
            ,before: function(obj){
                //do something
                console.error(obj)
            }
            ,done: function(res){
                console.error(res)
                //上传完毕回调
                if(res.code > 0){ //假设成功返回的code为0
                    if (houseNumberImage.length < GOODS_IMAGE_MAX) houseNumberImage.push(res.data.pic_path);
                    refresHouseNumberImage();
                }
            }
            ,error: function(){
                //请求出错处理
            }
        });

        upload.render({
            elem: '.js-add-quality-image' //绑定元素
            ,url:ns.url('shop/upload/image')
            ,accept: 'images' //上传图片
            ,multiple: true //允许多文件上传
            ,before: function(obj){
                //do something
                console.error(obj)
            }
            ,done: function(res){
                console.error(res)
                //上传完毕回调
                if(res.code > 0){ //假设成功返回的code为0
                    if (qualityImage.length < GOODS_IMAGE_MAX) qualityImage.push(res.data.pic_path);
                    refresQualityImage();
                }
            }
            ,error: function(){
                //请求出错处理
            }
        });

         //时间选择器
        laydate.render({
        	elem: '#startTime'
        	, type: 'time'
        	,value: ""
            ,format:'HH:mm'
        	,done: function(value, date, endDate){
        		var time = date.hours * 3600 + date.minutes * 60 + date.seconds;
        		$("input[name=start_time]").val(time);
            }
        });
        //时间选择器
        laydate.render({
        	elem: '#endTime'
        	, type: 'time'
        	,value: ""
            ,format:'HH:mm'
        	,done: function(value, date, endDate){
        		var time = date.hours * 3600 + date.minutes * 60 + date.seconds;
        		$("input[name=end_time]").val(time);
        	}
        });


        laydate.render({
            elem: '#businessLicenseStartTime',
            type: 'date',
            value: '',
            format:'yyyy-MM-dd',
            done: function(value) {
                $("input[name=business_license_start_time]").val(value);
            }
        });

        laydate.render({
            elem: '#businessLicenseEndTime',
            type: 'date',
            value: '',
            format:'yyyy-MM-dd',
            done: function(value) {
                $("input[name=business_license_end_time]").val(value);
            }
        });

        laydate.render({
            elem: '#idCardStartTime',
            type: 'date',
            value: '',
            format:'yyyy-MM-dd',
            done: function(value) {
                $("input[name=id_card_start_time]").val(value);
            }
        });

        laydate.render({
            elem: '#idCardEndTime',
            type: 'date',
            value: '',
            format:'yyyy-MM-dd',
            done: function(value) {
                $("input[name=id_card_end_time]").val(value);
            }
        });

        form.on('radio(businessLicenseType)', function(data){
            var value = data.value;

            if (value == 1){
                $("#business_license_time").hide();
            } else {
                $("#business_license_time").show();
            }
        });
        /**
         * 验证码
         */
        form.verify({
            required : function(value, item){
                var msg = $(item).attr("placeholder") != undefined ? $(item).attr("placeholder") : '';
                if(value == '') return msg;
            },
            province_id : function(value, item){
                if(value == ''){
                    return '请选择省份';
                }
            },
            city_id : function(value, item){
                if(value == ''){
                    return '请选择城市';
                }
            },
            district_id : function(value, item){
                if(value == ''){
                    return '请选择区/县';
                }
            },
            hotel_name : function (value,item) {
                if(value == ""){
                    return '请输入酒店名称';
                }
            },
            bankprovince: function(value){
                if (value == -1) return '请选择省';
            },
            bankcity: function(value){
                if (value == -1) return '请选择市';
            },
            bankdistrict: function(value, item){
                if (value == -1 && $(item).find('option').length > 1) return '请选择区县';
            },
        });

        upload = new Upload({
            elem: '#videoUpload',
            url: ns.url("admin/upload/video"),
            accept: "video",
            callback: function (res) {
                if (res.code >= 0) {
                    $("input[name='video_url']").val(res.data.path);
                    loadVideo();
                }
            }
        });

        //视频地址输入加载
        $("input[name='video_url']").blur(function () {
            loadVideo();
        });

        // 门店LOGO
        var store_upload = new Upload({
            elem: '#storeUpload',
            url: ns.url("admin/upload/upload"),
        });


        var front_pic_upload = new Upload({
            elem: '#frontPicUpload',
            url: ns.url("admin/upload/upload"),
        });

        var reverse_pic_upload = new Upload({
            elem: '#reversePicUpload',
            url: ns.url("admin/upload/upload"),
        });

        form.on('submit(save)', function(data){

            if( data.field.longitude == "" || data.field.latitude == ""){
                layer.msg('请确认地理位置!');
                $(".empty-address").show();
                return;
            }else{
                $(".empty-address").hide();
            }

            var full_address  = [];
            full_address.push($("select[name=province_id] option:selected").text());
            full_address.push($("select[name=city_id] option:selected").text());
            full_address.push($("select[name=district_id] option:selected").text());

            data.field.full_address = full_address.toString();

            data.field.images = houseNumberImage.toString();
            data.field.business_license = qualityImage.toString();//
            var html;
            ue.ready(function() {   //对编辑器的操作最好在编辑器ready之后再做
                html = ue.getContent();   //获取html内容，返回: <p>hello</p>
            });
            data.field.introduce = html;

            // 设备
            $(".ns-attr-new .goods-new-attr-tr").each(function (i) {
                var attr_name = $(this).find(".add-attr-name").val();
                var attr_value = $(this).find(".add-attr-value").val();
                var sort = $(this).find(".add-attr-sort").val();
                var attr = {};
                if (attr_name != "" && attr_value != "") {
                    attr.attr_class_id = -(i + Math.floor(new Date().getSeconds()) + Math.floor(new Date().getMilliseconds()));
                    attr.attr_id = attr.attr_class_id + -(i + Math.floor(new Date().getSeconds()) + Math.floor(new Date().getMilliseconds()));
                    attr.attr_name = attr_name;
                    attr.attr_value_id = attr.attr_id + -(i + Math.floor(new Date().getSeconds()) + Math.floor(new Date().getMilliseconds()));
                    attr.attr_value_name = attr_value;
                    attr.sort = sort;
                    goodsEquipmentFormat.push(attr);
                }
            });

            data.field.equipment_format = JSON.stringify(goodsEquipmentFormat);//设置格式

            // 标签
            $(".ns-attr-new-label .goods-new-attr-tr").each(function (i) {
                var attr_name = $(this).find(".add-attr-name").val();
                var attr_value = $(this).find(".add-attr-value").val();
                var sort = $(this).find(".add-attr-sort").val();
                var attr = {};
                if (attr_name != "" && attr_value != "") {
                    attr.attr_class_id = -(i + Math.floor(new Date().getSeconds()) + Math.floor(new Date().getMilliseconds()));
                    attr.attr_id = attr.attr_class_id + -(i + Math.floor(new Date().getSeconds()) + Math.floor(new Date().getMilliseconds()));
                    attr.attr_name = attr_name;
                    attr.attr_value_id = attr.attr_id + -(i + Math.floor(new Date().getSeconds()) + Math.floor(new Date().getMilliseconds()));
                    attr.attr_value_name = attr_value;
                    attr.sort = sort;
                    goodsLabelFormat.push(attr);
                }
            });

            data.field.label_format = JSON.stringify(goodsLabelFormat);//设置格式

            //删除图片
            if(!data.field.hotel_img) store_upload.delete();

            if(!data.field.front_pic_id_card) front_pic_upload.delete();

            if(!data.field.reverse_pic_id_card) reverse_pic_upload.delete();

            if(repeat_flag) return;
            repeat_flag = true;

            $.ajax({
                type : "POST",
                dataType: 'JSON',
                url: ns.url("hotel://admin/hotel/add"),
                async : true,
                data : data.field,
                success : function(res) {
                    repeat_flag = false;

                    if (res.code == 0) {
                        layer.confirm('添加成功', {
                            title: '操作提示',
                            btn: ['返回列表', '继续添加'],
                            yes: function() {
                                location.href = ns.url("hotel://admin/hotel/lists")
                            },
                            btn2: function() {
                                location.href = ns.url("hotel://admin/hotel/add");
                            }
                        });
                    } else {
                        layer.msg(res.message);
                    }
                }
            })
        });
    });

    function back() {
        location.href = ns.url("hotel://admin/hotel/lists");
    }

    /**
     * 加载视频
     * @param flag 是否暂停
     */
    function loadVideo(flag) {

        var video_url = $("input[name='video_url']").val();
        if (!video_url.length) return;

        var video = "goods_video";
        var myPlayer = videojs(video);
        var value = ns.img(video_url);
        $(".delete-video").show();

        videojs(video).ready(function () {
            var myPlayer = this;
            myPlayer.src(value);
            myPlayer.load(value);
            myPlayer.play();
            $("#goods_video").show();
            $("#temp_goods_video").hide();
            if (flag) {
                setTimeout(function () {
                    myPlayer.pause();
                }, 10);
            }
            setTimeout(function () {
                if (!$(".video-thumb .vjs-error-display").hasClass("vjs-hidden")) {
                    $("input[name='video_url']").val("");//video.js Line:7873
                    layer.msg("媒体不能加载，要么是因为服务器或网络失败，要么是因为格式不受支持。");
                } else {
                }
                $(".video-thumb span").removeClass("hide");
            }, 1000);
        });
    }

    //删除已选择的视频
    function deleteVideo() {
        var src = $("input[name='video_url']").val();
        if (src != "") {
            var video = 'goods_video';
            var myPlayer = videojs(video);
            videojs(video).ready(function () {
                var myPlayer = this;
                myPlayer.pause();
            });

            $("#goods_video").attr('src', "").hide();
            $("#temp_goods_video").show();
            $(".delete-video").hide();
            $("input[name='video_url']").val('');
        }
    }

    //渲染门牌号主图列表
    function refresHouseNumberImage() {
        var goods_image_template = $("#houseNumberImage").html();
        var data = {
            list: houseNumberImage,
            max: GOODS_IMAGE_MAX
        };

        laytpl(goods_image_template).render(data, function (html) {

            $(".js-goods-image").html(html);

            //加载图片放大
            loadImgMagnify();

            if (houseNumberImage.length) {

                //预览
                $(".js-goods-image .js-preview").click(function () {
                    $(this).parent().prev().find("img").click();
                });

                //图片删除
                $(".js-goods-image .js-delete").click(function () {
                    var index = $(this).attr("data-index");
                    houseNumberImage.splice(index, 1);
                    refresHouseNumberImage();
                });

                // 拖拽
                $('.js-goods-image .upload_img_square_item').arrangeable({
                    //拖拽结束后执行回调
                    callback: function (e) {
                        var indexBefore = $(e).attr("data-index");//拖拽前的原始位置
                        var indexAfter = $(e).index();//拖拽后的位置
                        var temp = houseNumberImage[indexBefore];
                        houseNumberImage[indexBefore] = houseNumberImage[indexAfter];
                        houseNumberImage[indexAfter] = temp;
                        refresHouseNumberImage();
                    }
                });
            }

            //最多传十张图
            if (houseNumberImage.length < GOODS_IMAGE_MAX) {
                $(".js-add-goods-image").show();
            } else {
                $(".js-add-goods-image").hide();
            }


        });
    }

    function refresQualityImage() {
        var goods_image_template = $("#qualityImage").html();
        var data = {
            list: qualityImage,
            max: GOODS_IMAGE_MAX
        };

        laytpl(goods_image_template).render(data, function (html) {

            $(".js-quality-image").html(html);

            //加载图片放大
            loadImgMagnify();

            if (qualityImage.length) {

                //预览
                $(".js-quality-image .js-preview").click(function () {
                    $(this).parent().prev().find("img").click();
                });

                //图片删除
                $(".js-quality-image .js-delete").click(function () {
                    var index = $(this).attr("data-index");
                    qualityImage.splice(index, 1);
                    refresQualityImage();
                });

                // 拖拽
                $('.js-quality-image .upload_img_square_item').arrangeable({
                    //拖拽结束后执行回调
                    callback: function (e) {
                        var indexBefore = $(e).attr("data-index");//拖拽前的原始位置
                        var indexAfter = $(e).index();//拖拽后的位置
                        var temp = qualityImage[indexBefore];
                        qualityImage[indexBefore] = qualityImage[indexAfter];
                        qualityImage[indexAfter] = temp;
                        refresQualityImage();
                    }
                });
            }

            //最多传十张图
            if (qualityImage.length < GOODS_IMAGE_MAX) {
                $(".js-add-quality-image").show();
            } else {
                $(".js-add-quality-image").hide();
            }


        });
    }

    /**
     * 重新渲染表单
     */
    function refreshFrom(){
        form.render();
        orderAddressChange();//改变地址
        map_class.mapChange();
    }

    //动态改变订单地址赋值
    function orderAddressChange(){
        map_class.address.province = $("select[name=province_id]").val();
        map_class.address.province_name = $("select[name=province_id] option:selected").text();
        map_class.address.city = $("select[name=city_id]").val();
        map_class.address.city_name = $("select[name=city_id] option:selected").text();
        map_class.address.district = $("select[name=district_id]").val();
        map_class.address.district_name = $("select[name=district_id] option:selected").text();
        map_class.address.address = $("input[name=address]").val()
    }

    /**
     * 地址下拉框（主要用于坐标记录）
     */
    function selectCallBack(){
        $("input[name=longitude]").val(map_class.address.longitude);//坐标
        $("input[name=latitude]").val(map_class.address.latitude);//坐标
    }

    //地图点击回调事件
    function mapChangeCallBack(){
        $("input[name=address]").val(map_class.address.address);//详细地址
        $("input[name=longitude]").val(map_class.address.longitude);//坐标
        $("input[name=latitude]").val(map_class.address.latitude);//坐标

        $.ajax({
            type : "POST",
            dataType: 'JSON',
            url : ns.url("shop/address/getGeographicId"),
            async : true,
            data : {
                "address" : map_class.address.area
            },
            success : function(data) {
                map_class.address.province = data.province_id;
                map_class.address.city = data.city_id;
                map_class.address.district = data.district_id;
                map_class.address.township = data.subdistrict_id;
                map_class.map_change = false;
                form.val("editselffetch", {
                    "province_id": data.province_id
                });
                $("select[name=province_id]").change();
                form.val("editselffetch", {
                    "city_id": data.city_id
                });
                $("select[name=city_id]").change();
                form.val("editselffetch", {
                    "district_id": data.district_id
                });
                refreshFrom();//重新渲染form
                map_class.map_change = true;
            }
        });
    }

    function addNewLabel(){
        var html = '<tr class="goods-attr-tr goods-new-attr-tr">' +
            '<td>' +
            '<input type="text" class="layui-input add-attr-name" placeholder="请输入标签名称" />' +
            '</td>' +
            '<td>' +
            '<input type="number" class="layui-input add-attr-sort" value="0" />' +
            '</td>' +
            '<td>' +
            '<div class="ns-table-btn"><a class="layui-btn" onclick="delLabel(this)">删除</a></div>' +
            '</td>' +
            '</tr>';

        $(".ns-attr-new-label").append(html);
        isNullTableLabel();
    }

    // 删除属性
    function delLabel(obj) {
        $(obj).parents("tr").remove();
        isNullTableLabel();
    }

    function isNullTableLabel() {
        var len = $(".ns-attr-new-label .goods-attr-tr").length;
        if (len == 0) {
            $(".ns-attr-new-label").html('<tr class="ns-null-data"><td colspan="4" align="center">无数据</td></tr>');
        } else {
            $(".ns-attr-new-label .ns-null-data").remove();
        }
    }

    // 添加新属性
    function addNewAttr() {
        var html = '<tr class="goods-attr-tr goods-new-attr-tr">' +
            '<td>' +
            '<input type="text" class="layui-input add-attr-name" placeholder="请输入景区名称" />' +
            '</td>' +
            '<td>' +
            '<input type="text" class="layui-input add-attr-value" placeholder="请输入交通信息" />' +
            '</td>' +
            '<td>' +
            '<input type="number" class="layui-input add-attr-sort" value="0" />' +
            '</td>' +
            '<td>' +
            '<div class="ns-table-btn"><a class="layui-btn" onclick="delAttr(this)">删除</a></div>' +
            '</td>' +
            '</tr>';

        $(".ns-attr-new").append(html);
        isNullTable();
    }

    // 删除属性
    function delAttr(obj) {
        $(obj).parents("tr").remove();
        isNullTable();
    }

    // 属性表格是否为空
    function isNullTable() {
        var len = $(".ns-attr-new .goods-attr-tr").length;
        if (len == 0) {
            $(".ns-attr-new").html('<tr class="ns-null-data"><td colspan="4" align="center">无数据</td></tr>');
        } else {
            $(".ns-attr-new .ns-null-data").remove();
        }
    }
</script>
{/block}